<template>
	<view>
		<!-- pages/goods_detail/goods_detail.wxml -->
		<view class="detail_swiper">
			<swiper :autoplay="true" :circular="true" :indicator-dots="true">
				<swiper-item v-for="(item, index) in goodsObj.pics" :key="index" @tap="handlePrevewImage"
					:data-url="item.pics_mid">
					<image mode="widthFix" :src="item.pics_mid"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods_price">￥{{goodsObj.goods_price}}</view>
		<view class="goods_name_row">
			<view class="goods_name">{{goodsObj.goods_name}}</view>
			<view class="goods_collect" @tap="handleCollect">
				<text :class="'iconfont ' + (isCollect?'icon-shoucang1':'icon-shoucang')"></text>
				<view class="collect_text">收藏</view>
			</view>
		</view>
		<view class="goods_info">
			<view class="goods_info_title">图文详情</view>
			<view class="goods_info_content">
				<!-- 富文本 -->
				<rich-text :nodes="goodsObj.goods_introduce"></rich-text>
			</view>
		</view>
		<view class="btm_tool">
			<view class="tool_item">
				<view class="iconfont icon-kefu"></view>
				<view>客服</view>
				<button open-type="contact"></button>
			</view>
			<view class="tool_item">
				<view class="iconfont icon-yixianshi-"></view>
				<view>分享</view>
				<button open-type="share"></button>
			</view>
			<navigator open-type="switchTab" url="/pages/cart/cart" class="tool_item">
				<view class="iconfont icon-gouwuche"></view>
				<view>购物车</view>
			</navigator>
			<view class="tool_item btn_cart" @tap="handleCartAdd">加入购物车</view>
			<view class="tool_item btn_buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	// pages/goods_detail/goods_detail.js
	// 引入用来发送请求的方法 一定要把路径补全
	import {
		request
	} from "../../request/index.js";
	import regeneratorRuntime from "../../lib/runtime/runtime";

	export default {
		data() {
			return {
				goodsObj: {},
				// 商品是否被收藏
				isCollect: false,
				// 商品对象
				GoodsInfo: {}
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let pages = getCurrentPages();
			let currentPage = pages[pages.length - 1];
			let options = currentPage.options;
			const {
				goods_id
			} = options; 
			// console.log(goods_id);
			this.getGoodsDetail(goods_id);
		},
		methods: {
			// 获取商品详情数据
			async getGoodsDetail(goods_id) {
				const goodsObj = await request({
					url: "/goods/detail",
					data: {
						goods_id
					}
				});
				this.GoodsInfo = goodsObj; // console.log(goodsObj);
				// 1. 获取缓存中的商品收藏的数组

				let collect = wx.getStorageSync("collect") || []; 
				// 2. 判断当前商品是否被收藏

				let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
				this.setData({
					goodsObj: {
						goods_name: goodsObj.goods_name,
						goods_price: goodsObj.goods_price,
						goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
						pics: goodsObj.pics
					},
					isCollect
				});
			},

			// 点击轮播图 放大预览
			handlePrevewImage(e) {
				// console.log("预览");
				// 1. 构建要预览的图片数组
				const urls = this.GoodsInfo.pics.map(v => v.pics_mid); 
				
				// 2. 接收传递过来的图片url
				const current = e.currentTarget.dataset.url;
				wx.previewImage({
					current,
					urls
				});
			},

			// 点击加入购物车
			handleCartAdd() {
				// console.log("加入购物车");
				// 1. 获取缓存中的购物车数组
				let cart = wx.getStorageSync("cart") || []; 
				
				// 2. 判断商品对象是否存在于购物车数组中
				let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);

				if (index === -1) {
					// 不存在 第一次添加
					this.GoodsInfo.num = 1;
					this.GoodsInfo.checked = true;
					cart.push(this.GoodsInfo);
				} else {
					// 4. 已经存在购物车的数据 执行num++
					cart[index].num++;
				} 
				
				// 5. 把购物车重新添加回缓存中
				wx.setStorageSync("cart", cart); 
				
				// 6.弹窗提示
				wx.showToast({
					title: '加入成功',
					icon: 'success',
					mask: true
				});
			},

			// 点击商品收藏图标
			handleCollect() {
				let isCollect = false; // 1. 获取缓存中的商品收藏数组

				let collect = wx.getStorageSync("collect") || []; // 2. 判断该商品是否被收藏过

				let index = collect.findIndex(v => v.goods_id === this.GoodsInfo.goods_id); // 3. 当index != -1表示 已经收藏过

				if (index !== -1) {
					// 能找到 已经收藏过了 在数组中删除该商品
					collect.splice(index, 1);
					isCollect = false;
					wx.showToast({
						title: '取消成功',
						icon: 'success',
						mask: true
					});
				} else {
					// 没有收藏过
					collect.push(this.GoodsInfo);
					isCollect = true;
					wx.showToast({
						title: '收藏成功',
						icon: 'success',
						mask: true
					});
				} 
				
				// 4. 把数据存入缓存中
				wx.setStorageSync("collect", collect); 
				
				// 5. 修改data中的属性 isCollect
				this.setData({
					isCollect
				});
			}

		}
	};
</script>
<style>
	@import "./goods_detail.css";
</style>
